<template>
  <div>
    <Header></Header>
    <div class="wrapper">
      <div class="main">
        <div class="flow_section">
          <div class="flow_title">{{ flowTitle }}</div>
          <div class="line"></div>
          <div class="flow_content">
            <div :class="[{'flow_detail_bg' : index%2 == 0}, {'flow_detail_arrow' : index%2 != 0}]" v-for="(item, index) in flowHeader" :key="index">
              <div v-if="item.label == ''">
                <img style="margin-top: 25px; margin-left: 19px" :src="require('@/assets/front-img/flow_arrow.png')" alt="">
              </div>
              <div class="flow_item" v-else>
                <div>
                  <img :src="getImageUrl(item.img)" alt="">
                </div>
                <div class="flow_item_title">{{ item.label }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="list_section">
          <div class="filter">
            <el-form v-if="type == 1" ref="form" :model="listQuery" label-width="80px" :inline="true">
              <el-form-item label="挂牌状态" prop='name'>
                <el-select placeholder='全部状态' v-model="listQuery.status" @change="search" clearable>
                  <el-option value="" label="全部状态"></el-option>
                  <el-option :value='2' label='进行中'></el-option>
                  <el-option :value='3' label='已完成'></el-option>
                  <el-option :value='99' label='已取消'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称" prop='name'>
                <el-input v-model="listQuery.name$lk" placeholder="请输入要搜索的产品名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="search" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
            <el-form v-else-if="type == 2" ref="form" :model="listQuery" label-width="80px" :inline="true">
              <el-form-item label="竞价状态" prop='name'>
                <el-select placeholder='全部状态' v-model="listQuery.status" @change="search" clearable>
                  <el-option value="" label="全部状态"></el-option>
                  <el-option :value='2' label='进行中'></el-option>
                  <el-option :value='3' label='已完成'></el-option>
                  <el-option :value='99' label='已取消'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="竞价类型" prop='type'>
                <el-select placeholder='全部类型' v-model="listQuery.type" @change="search" clearable>
                  <el-option value="" label="全部类型"></el-option>
                  <el-option :value='1' label='采购商竞价'></el-option>
                  <el-option :value='0' label='供应商竞价'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称" prop='name'>
                <el-input v-model="listQuery.name$lk" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="search">查询</el-button>
              </el-form-item>
            </el-form>
            <el-form v-else-if="type == 3" ref="form" :model="listQuery" label-width="80px" :inline="true">
              <el-form-item label="集采状态" prop='name'>
                <el-select placeholder='全部状态' v-model="listQuery.status" @change="search" clearable>
                  <el-option value="" label="全部状态"></el-option>
                  <el-option :value='2' label='进行中'></el-option>
                  <el-option :value='3' label='已完成'></el-option>
                  <el-option :value='99' label='已取消'></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-form v-else ref="form" :model="listQuery" label-width="80px" :inline="true">
              <el-form-item label="委托状态" prop='name'>
                <el-select placeholder='全部状态' v-model="listQuery.status" @change="search" clearable>
                  <!--                  1待审核、2已确认、98已驳回、99已取消-->
                  <el-option value="" label="全部状态"></el-option>
                  <el-option :value='1' label='待审核'></el-option>
                  <el-option :value='2' label='已确认'></el-option>
                  <el-option :value='98' label='已驳回'></el-option>
                  <el-option :value='99' label='已取消'></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="委托类型" prop='name'>
                <el-select placeholder='全部类型' v-model="listQuery.type" @change="search" clearable>
                  <!--                 委托类型：3仅代买、4仅代售-->
                  <el-option value="" label="全部类型"></el-option>
                  <el-option :value='3' label='仅代购'></el-option>
                  <el-option :value='4' label='仅代售'></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <el-table v-loading="listLoading" class="table-wrapper" ref="multipleTable" :data="list" tooltip-effect="dark"
            style="width: 100%" :header-cell-style="{background: 'rgba(244, 247, 250, 1)', color: 'color: rgba(102, 102, 102, 1);', }">
            <template v-if="type == 1">
              <el-table-column label="产品分类" prop="categoryName" align="center" />
              <el-table-column label="产品名称" prop="name" align="center" />
              <el-table-column label="求购数量" prop="topNum" align="center" />
              <el-table-column label="收货地址" align="center">
                <template slot-scope="{row}">
                  {{ row.startProvinceName }}{{ row.startCityName }}
                </template>
                </el-table-column>
              <el-table-column label="需求日期" prop="createTime" align="center" />
              <el-table-column label="状态" prop="statusText" align="center" />
            </template>

            <template v-if="type == 2">
              <el-table-column label="竞价类型" align="center">
                <template slot-scope="{row}">
                  <div>{{ row.typeText }}</div>
                  <div v-if="row.priceTimes" class="detail">已出价{{ row.priceTimes }}次</div>
                  <div v-else class="detail">已出价0次</div>
                </template>
              </el-table-column>
              <el-table-column label="标题" min-width='170px' align="center">
                <template slot-scope="{row}">
                  <div>{{ row.name }}</div>
                  <div class="detail">{{row.startDate}} ~ {{row.endDate}}</div>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center">
                <template slot-scope="{row}">
                  {{row.topNum}}{{row.unit}}
                </template>
              </el-table-column>
              <el-table-column label="地区" align="center">
                <template slot-scope="{row}">
                  {{row.startProvinceName}}{{row.startCityName}}
                </template>
              </el-table-column>
              <el-table-column label="起拍价" align="center">
                <template slot-scope="{row}">
                  {{row.topPrice}}元/{{row.unit}}
                </template>
              </el-table-column>
              <el-table-column label="最新竞价" align="center">
                <template slot-scope="{row}">
                  {{row.newPrice}}元/{{row.unit}}
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="statusText" align="center" />
            </template>

            <template v-if="type == 3">
              <el-table-column label="标题" prop="name" align="center" />
              <el-table-column label="成团数量" prop="totalNum" align="center" />
              <el-table-column label="采购价" align="center">
                <template slot-scope="{row}">
                  {{row.topPrice}}元/{{row.unit}}
                </template>
              </el-table-column>
              <el-table-column label="地区" align="center">
                <template slot-scope="{row}">
                  {{row.startProvinceName}}{{row.startCityName}}
                </template>
              </el-table-column>
              <el-table-column label="集采时间" align="center">
                <template slot-scope="{row}">
                  {{row.startDate}} ~ {{row.endDate}}
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="statusText" align="center" />
            </template>

            <template v-if="type == 4">
              <el-table-column label="委托编码" prop="identifier" align="center" />
              <el-table-column label="委托说明" prop="remark" align="center" />
              <el-table-column label="委托类型" prop="typeText" align="center" />
              <el-table-column label="申请时间" prop="createTime" align="center" />
              <el-table-column label="状态" prop="statusText" align="center" />
            </template>

            <el-table-column label='操作' align="center">
              <template slot-scope="scope">
                <el-button size="mini"
                  @click="handleClick(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination v-show="total>0" :pageNo.sync="listQuery.pageNo" :pageSize.sync="listQuery.pageSize"
            :total="total" @change="getList" />
        </div>
      </div>
    </div>
    <Footer></Footer>
    <el-dialog title="委托详情" :visible.sync="dialogVisible" width="666px">
      <div class="wt_section" v-for="(item, index) in detailHeader" :key="index">
        <div class="list_label_bg">
          <div class="list_label">{{ item.label }}</div>
        </div>
        <div class="list_value">{{ selectItem[item.value] }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { matchPageByQo, biddingPageByQo, focusPageByQo, entrustPageByQo } from "@/api/front-transaction.js";
import Footer from "@/views/front/components/Footer";
import Header from "@/views/front/components/Header";
import Pagination from "@/views/front/components/Pagination";

export default {
  name: 'index',
  props: {
    type: {
      type: Number,
      default: 1
    },
    flowHeader: {
      type: Array,
      default: () => []
    },
  },
  components: {
    Footer,
    Header,
    Pagination,
  },
  data() {
    return {
      flowTitle: '',
      total: 0,
      list:[],
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        type: '',
        status: '',
        name$lk: ''
      },
      requestMethod: Object,
      listLoading: false,
      detailHeader: [
        {label: '委托编码', value: "identifier"},
        {label: '委托说明', value: "remark"},
        {label: '委托类型', value: "typeText"},
        {label: '委托企业', value: "companyName"},
        {label: '申请时间', value: "createTime"},
        {label: '当前状态', value: "statusText"},
      ],
      selectItem: {},
      dialogVisible: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    getImageUrl(value) {
      return require('@/assets/front-img/' + value)
    },
    search() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      this.requestMethod(this.listQuery).then((res) => {
        const { list, totalCount } = res
        list ? this.list = list : this.list = []
        this.total = totalCount
        this.listLoading = false
      });
    },
    handleClick(row) {
      if (this.type == 1) {
        this.$router.push({path: '/front-together-details', query: {id: row.id}})
      } else if (this.type == 2) {
        this.$router.push({path: '/front-bidding-details', query: {id: row.id}})
      } else if (this.type == 3) {
        this.$router.push({path: '/front-collection-details', query: {id: row.id}})
      } else {
        this.dialogVisible = true
        this.selectItem = row
      }
    }
  },
  created() {
    if (this.type == 1) {
      this.flowTitle = '买方挂牌交易流程'
      this.requestMethod = matchPageByQo
    } else if (this.type == 2) {
      this.flowTitle = '竞价交易流程'
      this.requestMethod = biddingPageByQo
    } else if (this.type == 3) {
      this.flowTitle = '集采交易流程'
      this.requestMethod = focusPageByQo
    } else {
      this.flowTitle = '委托交易流程'
      this.requestMethod = entrustPageByQo
    }
    this.getList();

    this.$nextTick(() => {
      if (this.type == 4) {
        let bgList = document.querySelectorAll(".flow_detail_bg")
        if (bgList && bgList.length > 0) {
          bgList.forEach(item => {
            item.style.width = '240px';
          });
        }
      }
    })
  },
  mounted() {
  
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .wrapper {
    position: relative;
    width: 100%;
    display: flex;
		justify-content: center;
    background-color: rgb(243, 245, 249);

    .main {
      position: relative;
      width: 1300px;
      margin-top: 20px;
      padding-bottom: 40px;
    }
  }

  .flow_section {
    position: relative;
    width: 100%;
    height: 290px;
    padding-top: 21px;
    background: #fff;

    .flow_title {
      margin-left: 30px;
      height: 27px;
      color: rgba(51, 51, 51, 1);
      font-size: 18px;
      font-weight: 400;
      line-height: 27px;
    }

    .line {
      margin-top: 10px;
      margin-left: 30px;
      width: 1240px;
      height: 1px;
      background: rgba(218, 224, 232, 1);
    }

    .flow_content {
      display: flex;
      justify-content: center;
      margin-top: 60px;
      width: 100%;

      .flow_detail_bg {
        width: 140px;

        .flow_item {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: auto;
            height: 58px;
          }

          .flow_item_title {
            width: 100%;
            margin-top: 10px;
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 400;
            text-align: center;
            white-space:pre-line;
          }
        }
      }

      .flow_detail_arrow {
        width: 110px;
      }
    }
  }

  .list_section {
    margin-top: 20px;
    width: 1300px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #fff;

    .filter {
      width: 100%;
      padding: 20px 20px 2px 16px;
    }
  }

  .detail {
    height: 16px;
    color: rgba(153, 153, 153, 1);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }

  .wt_section {
    position: relative;
    display: flex;
    border-top: 1px solid rgba(218, 224, 232, 1);
    border-left: 1px solid rgba(218, 224, 232, 1);
    border-right: 1px solid rgba(218, 224, 232, 1);

    &:nth-child(6) {
      border-bottom: 1px solid rgba(218, 224, 232, 1);
    }

    .list_label_bg {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      min-height: 51px;
      background: rgba(244, 247, 250, 1);
      border-right: 1px solid rgba(218, 224, 232, 1);

      .list_label {
        width: 110px;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 400;
        text-align: center;
        line-height: 51px;
      }
    }

    .list_value {
      padding: 16px 16px 16px 27px;
    }
  }
</style>